<script setup lang="ts">
import { Message } from "@/views/domain/knowledge/store/database";
import { avatarUrl, debugMode } from "@/views/domain/knowledge/config/ollama";
import Markdown from "../Markdown";
import SRAvatar from "@/components/SRComponents/SRAvatar/index.vue";

type Props = {
  message: Message;
};

const { message } = defineProps<Props>();
</script>

<template>
  <div class="msg-body">
    <SRAvatar name="我" bg-color="var(--el-color-primary)" />

    <div class="msg-content">
      <code
        v-if="debugMode"
        class="whitespace-pre-line text-gray-900 dark:text-gray-100"
      >
        {{ message.content }}
      </code>
      <div
        v-else
        class="prose prose-base max-w-full dark:prose-invert prose-headings:font-semibold prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-p:text-gray-900 prose-p:first:mt-0 prose-a:text-blue-600 prose-code:text-sm prose-code:text-gray-900 prose-pre:p-2 dark:prose-p:text-gray-100 dark:prose-code:text-gray-100"
      >
        <Markdown :source="message.content" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.msg-body {
  // flex rounded-xl bg-gray-100 px-2 py-6 dark:bg-gray-800 sm:px-4
  display: flex;
  border-radius: 0.5rem;
  background-color: var(--el-bg-color);
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.msg-content {
  display: flex;
  flex: 1;
  border-radius: 0.75rem;
  align-items: center;
  max-width: 90%;
  margin-left: 8px;
}
</style>
